<#assign menuId=2>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设计稿详情-${Application.systemName!}</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />

        <link href="../css/myself.css" rel="stylesheet" type="text/css" />
        <link href="../css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" >

    </head>
    <body class="skin-blue">
        <!-- header logo: style can be found in header.less -->
        <#include "../header.html"/>
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- Left side column. contains the logo and sidebar -->
            <#include "../menu.html"/>

            <!-- Right side column. Contains the navbar and content of the page -->
           <aside class="right-side">
           	<section class="content-header">
                    <h1 >设计稿详情 </h1>
                    
                    <div class="clear" style="clear:both"></div>
                    <#if proofingOrderId?? && proofingOrderId!=0>
                    <ol class="ol_left">
                    	<li>当前位置：</li>
                        <li><a href="../proofingorder/list?pageNo=1">打样订单</a></li>
                        <li><a href="../proofingorder/detail?proofingPatternId=${proofingOrderId!}">> 打样订单详情</a></li>
                        <li>> 设计稿详情</li>
                    </ol>
                    <#elseif productionOrderId?? && productionOrderId!=0>
                    <ol class="ol_left">
                    	<li>当前位置：</li>
                        <li><a href="../productionorder/list?pageNo=1">大货订单</a></li>
                        <li><a href="../productionorder/detail?id=${productionOrderId!}">> 大货订单详情</a></li>
                        <li>> 设计稿详情</li>
                    </ol>
                    <#else>
                    <ol class="ol_left">
                    	<li>当前位置：</li>
                        <li><a href="../designorder/list?pageNo=1">设计订单</a></li>
                        <li><a href="../designorder/detail?businessId=${orderPattern.designId!}&orderId=${orderPattern.orderId!}">> 设计订单详情</a></li>
                        <li>> 设计稿详情</li>
                    </ol>
                    </#if>
                   	<hr class="no-margin" />
            </section>
            <section class="content">
            	<div class="row">
            		<div class="col-md-12">
                        <div class="box" style="padding: 20px"> 
                            <div class="clearfix center">
                            	<div class="clearfix">
                            		<span class="pull-left bold">款式图</span>
                                <span class="pull-right">
                                	<#if productionOrderId??>
                                	<#else>
                                	<#if status?? && status &lt; 99>
                                	<button type="button" id="edit_pattern" class="btn btn-primary btn-sm">编辑</button>
                                	</#if>
                                	</#if>
                                </span>
                            	</div>
                                
                                <div class="col-md-12 photo">
                                    <div class="zhanshi" >
                                        <div class="zhanshi_find1">
                                            <div class="col-md-8 zhanshi_find1_content">
                                                <img id="zhanshi_photo" src="${Application.accessFileUrl!}${orderPattern.mainImage!}">
                                            </div>
                                            <div class="col-md-4 zhanshi_find1_content1">
                                                <#list orderPattern.imageBusinessFiles as image>
                                                <span>
                                                <img src="${Application.accessFileUrl!}${image.businessFile!}">
                                                <#if image.businessFile==orderPattern.mainImage>
                                                <p style="display: block;">主图</p>
                                                </#if>
                                                </span>
                                                </#list>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                             <div class=" custorm-view clearfix center">
                                 <span class="content-title-left bold pull-left">设计信息</span>
                            </div>
                            <div class="center">
                                <table class="table text-center table-bordered marginTOP">
                                	<tr>
                                		<td width="10%">款号</td>
                                		<td width="15%">${orderPattern.patternNo!}</td>
                                		<td width="10%">年份</td>
                                		<td width="15%">${orderPattern.period!}</td>
                                		<td width="10%">季节</td>
                                		<td width="15%">${orderPattern.season!}</td>
                                		<td width="10%">性别</td>
                                		<td width="15%">${orderPattern.sex!}</td>
                                	</tr>
                                	<tr>
                                		<td>风格</td>
                                		<td colspan="7" class="style text-left">
                                			<#list orderPattern.styleLabelConstants as style>
                                			<span class="bule-border">${style.name!}</span>
							                </#list>
                                		</td>
                                	</tr>
                                </table>
                            </div>
                            
                            <div class=" custorm-view clearfix center">
                                <span class="content-title-left bold pull-left">款式细节明细</span>
                            </div>
							
                            ${orderPattern.detailDescription!}
                            
                            <div class=" custorm-view clearfix center" style="margin-top: 20px"> 
                                 <span class="content-title-left bold pull-left">面辅料明细</span> 
                            </div>
                            ${orderPattern.accessoryDetail!}
                        </div>
            		</div>
            	</div>
            </section>
            </aside><!-- /.right-side -->

        </div><!-- ./wrapper -->
        <!-- jQuery 2.0.2 -->
        <style type="text/css">
        .bold{
        	font-size: 14px;
        	font-weight: bold;
        }
        .pull-left{
        	border-left: 6px solid #3882ff;
        	padding-left: 5px;
        }
        .particulars{
        	border: 1px solid #ccc;
        	margin-top: 10px;
        }
        .custorm-view{
                border: none;
            }
        .clear{
            clear: both;
            width: 100%;
            height: 1px;

        }
        .marginTOP{
        	margin-top: 10px;
        }   
        .find_sp{
            margin-bottom: 10px;
            padding: 0 10px;
            display: inline-block;
            font-weight: bold;
            float: left;
            padding-right: 5px;
        }
        .find_div{
            width: 90%;
            height: 90px;
            border:1px solid #ccc;
            float: left;
        }
        .ol_left{
	            width: 100%;
            height: 30px;
            line-height: 30px;
            padding: 0;
        }
        .ol_left>li{
            float: left;
            margin-right: 5px;
        }
        .ol_left li, .ol_left{
        	margin-bottom: 0;
        }
        .six-font{
            font-size: 14px;
        }
        .six-font>span{
            font-size: 16px;
        }
     	
      
      
        .photo{
            height: 430px;
            max-height: 430px;
            border:1px solid #ccc;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 0;
        }
        .shangchuan{
            margin-top: 100px;
            position: relative;
            cursor: pointer;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1;
        }
        .shangchuan  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }
        .zhanshi{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            display: none;
            background-color: #fff;

        }
        #zhanshi_photo{
        	border: 1px solid #ccc;
        	width: 720px;
        	height: 405px;
        } 
        .zhanshi_find1{
            widows: 96%;
            height: 96%;
            margin: 1% 2%;
        }
        .zhanshi_find1>.zhanshi_find1_content{
           
            height: 100%;
            padding: 0;
        }
        .zhanshi img{
        	
            width: 100%;
            height: 100%;
            border-width: 0;
        }
        .zhanshi_find1>.zhanshi_find1_content1{padding: 0;}
        .zhanshi_find1>.zhanshi_find1_content1>span{
            width: 20%;
            height: 60px;
            display: inline-block;
            float: left;
            border:1px solid #ccc;
            cursor: pointer;
            margin:0 0 10px  10px;
            position: relative;
        }
        .span_active{
            border:2px solid #3882FF !important;
            box-shadow: 0 0 3px #3882ff;
        }
        .zhanshi_find1>.zhanshi_find1_content1>span>p{
            position: absolute;
            width: 100%;
            text-align: center;
            height: 20px;
            line-height: 20px;
            bottom: -10px;
            font-size: 10px;
            background-color: #4f8aee;
            color: #fff;
            display: none;
        }
        .tianjia{
            display: inline-block;
            width: 20%;
            height: 60px;
            display: inline-block;
            float: left;
            border:1px solid #ccc;
            cursor: pointer;
            margin:0 0 10px  10px;
            position: relative;
        }
        .tianjia  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer;
            width:100%;
            height: 100%;
        }
        .shejixinxi{
            border:1px solid #ccc;
        }
       .bootstrap-tagsinput{
        border:none;
       }
       .bootstrap-tagsinput .tag{
        margin-right: 2px;
        color: #3882ff;
        border: 1px solid;
        border-radius: 0;
       }
       .label-info{
        background-color: #fff;
       }
        </style>
        <script src="../js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
        <!-- AdminLTE for demo purposes -->
        
        <script src="../js/bootstrap-tagsinput.js"></script>

        <script type="text/javascript">
            $(function () {
	
                $('.zhanshi').show()
                
                <#list orderPattern.styleLabelConstants as style>
                $('.bootstrap-tagsinput').children('input').val("${style.name!}").blur();
                </#list>

        	});
            
            $('.zhanshi_find1 .zhanshi_find1_content1 span').click(function(){
                $(this).addClass('span_active');
                $(this).siblings('span').removeClass('span_active');
                var src=$(this).find('img').attr('src');
                $("#zhanshi_photo").attr("src",src);
            });
            
            $(function(){
            	$('#edit_pattern').click(function(){
            		location.href='../orderpattern/showEditPage?id=${orderPattern.id!}&proofingOrderId=${proofingOrderId!}';
            	});
            })
        </script>
        
    </body>
</html>
